/* 全局样式变量 */

/* 主题色彩 */
$primary-color: #007aff;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;
$text-color: #333;
$text-secondary: #666;
$text-placeholder: #999;
$border-color: #e5e5e5;
$background-color: #f5f5f5;
$white: #ffffff;
$black: #000000;

/* 字体大小 */
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-xxl: 20px;
$font-size-xxxl: 24px;

/* 间距 */
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-base: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-xxl: 24px;
$spacing-xxxl: 32px;

/* 圆角 */
$border-radius-sm: 4px;
$border-radius-base: 8px;
$border-radius-lg: 12px;
$border-radius-xl: 16px;
$border-radius-xxl: 20px;
$border-radius-full: 9999px;

/* 阴影 */
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
$shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08);
$shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
$shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.16);

/* 过渡动画 */
$transition-fast: 0.2s ease;
$transition-base: 0.3s ease;
$transition-slow: 0.5s ease;

/* Z-index层级 */
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

/* 布局相关 */
$header-height: 50px;
$tabbar-height: 50px;
$safe-area-inset-top: env(safe-area-inset-top);
$safe-area-inset-bottom: env(safe-area-inset-bottom);

/* 断点 */
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

/* Flex布局工具类 */
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.align-stretch {
  align-items: stretch;
}

.flex-1 {
  flex: 1;
}

/* 文本工具类 */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 间距工具类 */
.m-0 { margin: 0; }
.m-1 { margin: $spacing-xs; }
.m-2 { margin: $spacing-sm; }
.m-3 { margin: $spacing-base; }
.m-4 { margin: $spacing-lg; }
.m-5 { margin: $spacing-xl; }

.p-0 { padding: 0; }
.p-1 { padding: $spacing-xs; }
.p-2 { padding: $spacing-sm; }
.p-3 { padding: $spacing-base; }
.p-4 { padding: $spacing-lg; }
.p-5 { padding: $spacing-xl; }

/* 圆角工具类 */
.rounded { border-radius: $border-radius-base; }
.rounded-sm { border-radius: $border-radius-sm; }
.rounded-lg { border-radius: $border-radius-lg; }
.rounded-full { border-radius: $border-radius-full; }

/* 阴影工具类 */
.shadow { box-shadow: $shadow-base; }
.shadow-sm { box-shadow: $shadow-sm; }
.shadow-lg { box-shadow: $shadow-lg; }

/* 隐藏工具类 */
.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

/* 安全区域 */
.safe-top {
  padding-top: $safe-area-inset-top;
}

.safe-bottom {
  padding-bottom: $safe-area-inset-bottom;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

.animate-fadeIn {
  animation: fadeIn $transition-base ease-in;
}

.animate-slideInUp {
  animation: slideInUp $transition-base ease-out;
}

.animate-slideInDown {
  animation: slideInDown $transition-base ease-out;
}

.animate-slideInLeft {
  animation: slideInLeft $transition-base ease-out;
}

.animate-slideInRight {
  animation: slideInRight $transition-base ease-out;
}

.animate-bounce {
  animation: bounce $transition-base ease-in-out;
}